import { useEffect, useState } from 'react';
import { Link, useRequest, history } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import { Button, Select, Breadcrumb, message, Form } from 'antd';
import {
  EditOutlined,
  UserOutlined,
  BarChartOutlined,
  ReloadOutlined,
} from '@ant-design/icons';
import moment from 'moment';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormDatePicker,
  ProFormDateRangePicker,
} from '@ant-design/pro-components';
import ProCard from '@ant-design/pro-card';
import { getValueByLabel } from '../getValueLable';
export default () => {
  const [gutter, setGutter] = useState(12);
  const [editYearVisible, setEditYearVisible] = useState(false);
  const [debounceTime, setDebounceTime] = useState(10 * 1000);

  const [gender, setGender] = useState([]);
  const [countryType, seCountryType] = useState([]);
  const [country, setCountry] = useState([]);
  const [nation, setNation] = useState([]);
  const [politicalStatus, setPoliticalStatus] = useState([]);
  const [idType, setIdType] = useState([]);
  const [unit, setUnit] = useState([]);
  const [directionId, setDirectionId] = useState([]);
  const [groupId, setGroupId] = useState([]);
  const [topEducationMajor, setTopEducationMajor] = useState([]);
  const [technicalGrade, setTechnicalGrade] = useState([]);
  const [technicalName, setTechnicalName] = useState([]);
  const [position, setPosition] = useState([]);
  const [topDegree, setTopDegree] = useState([]);
  const [topEducation, setTopEducation] = useState([]);
  const [yearForm] = Form.useForm();

  const [directionList, setDirectionList] = useState<any>(); //方向下拉框
  const [groupList, setGroupList] = useState<any>(); //子方向下拉框

  const [form] = Form.useForm();

  const userId = history.location.pathname.replace(
    '/SystemManage/UserManagement/UserDetail/',
    '',
  );

  //管理员返回id对应用户的信息，用于表单
  const findOneUserInfoDetail = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/user/findOneUserInfoDetail',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
      onSuccess: (result) => {
        form.setFieldsValue({
          ...result,
          timeList: [result.enterTime, result.exitTime],
        });
      },
    },
  );

  // //多个模糊查询进行隔离
  // var getLike: any = {
  //   countryType: '',
  //   country: '',
  //   gender: '',
  //   idType: '',
  //   nation: '',
  //   politicalStatus: '',
  //   unit: '',
  //   topEducationMajor: '',
  //   technicalGrade: '',
  //   technicalName: '',
  //   position: '',
  //   topDegree: '',
  //   topEducation: '',
  // };
  // for (var key in getLike) {
  //   getLike[key] = useRequest(
  //     (data) => {
  //       return {
  //         url: 'http://10.1.40.84:9993/getLike',
  //         method: 'POST',
  //         headers: {
  //           Authorization: localStorage.getItem('token') || '',
  //         },
  //         data: data,
  //       };
  //     },
  //     {
  //       manual: true,
  //     },
  //   );
  // }
  //获取当前用户信息
  const getUserInfo = useRequest(
    (data = null) => {
      return {
        url: `http://10.1.40.84:9993/user/getUserInfo`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      onSuccess: (result) => {
        if (result) {
          const personInfo = JSON.parse(
            localStorage.getItem('personInfo') || '{}',
          );
          if (personInfo.ROLE_管理员?.direction) {
            setDirectionList(personInfo.ROLE_管理员?.direction);
          } else {
            setDirectionList([
              {
                label: result.userGroupBo?.directionName,
                value: result.userGroupBo?.directionId,
              },
            ]);
          }

          if (personInfo.ROLE_管理员?.group) {
            setGroupList(personInfo.ROLE_管理员?.group);
          } else if (personInfo.ROLE_方向负责人?.group) {
            setGroupList(personInfo.ROLE_方向负责人?.group);
          } else {
            setGroupList([
              {
                label: result.userGroupBo?.groupName,
                value: result.userGroupBo?.groupId,
              },
            ]);
          }
          findOneUserInfoDetail.run({ id: userId });
        }
      },
    },
  );
  const getCountryType = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'countryType', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        seCountryType(result);
      },
    },
  );
  const getCountry = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'country', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        setCountry(result);
      },
    },
  );
  const getGender = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'gender', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        setGender(result);
      },
    },
  );
  const getIdType = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'idType', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        setIdType(result);
      },
    },
  );
  const getNation = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'nation', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        setNation(result);
      },
    },
  );
  const getPoliticalStatus = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'politicalStatus', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        setPoliticalStatus(result);
      },
    },
  );
  const getUnit = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'unit', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        setUnit(result);
      },
    },
  );
  const getTopEducationMajor = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'topEducationMajor', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        setTopEducationMajor(result);
      },
    },
  );
  const getTechnicalGrade = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'technicalGrade', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        setTechnicalGrade(result);
      },
    },
  );
  const getTechnicalName = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'technicalName', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        setTechnicalName(result);
      },
    },
  );
  const getPosition = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'position', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        setPosition(result);
      },
    },
  );
  const getTopDegree = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'topDegree', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        setTopDegree(result);
      },
    },
  );
  const getTopEducation = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data: { field: 'topEducation', ...data },
      };
    },
    {
      onSuccess: (result, params) => {
        setTopEducation(result);
      },
    },
  );

  //返回方向下拉框
  const getDirectionLabel = useRequest((data = {}) => {
    return {
      url: 'http://10.1.40.84:9993/direction/getDirectionLabel',
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data,
    };
  });

  //返回团队下拉框
  const getGroupLabel = useRequest(
    (data = '') => {
      return {
        url: `http://10.1.40.84:9993/group/getGroupLabel?level=${data}`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
      };
    },
    {
      manual: true,
    },
  );

  //管理员返回id对应用户的信息，用于表格
  const findOneUserInfoDetail2 = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/user/findOneUserInfoDetail',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );

  //更新用户信息
  const updateUserById = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/user/updateUserById',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );

  //添加用户
  const insertUser = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/user/insertUser',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );

  //重置密码
  const reSetPassword = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/user/reSetPassword',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );

  const columns: any = [
    {
      title: '年度',
      dataIndex: getValueByLabel('年度'),
      key: getValueByLabel('年度'),
      align: 'center',
    },
    {
      title: '人员类别',
      dataIndex: getValueByLabel('人员类别'),
      key: getValueByLabel('人员类别'),
      align: 'center',
    },
    {
      title: '方向名称',
      dataIndex: getValueByLabel('方向名称'),
      key: getValueByLabel('方向名称'),
      align: 'center',
    },
    {
      title: '子方向名称',
      dataIndex: getValueByLabel('团队名称'),
      key: getValueByLabel('团队名称'),
      align: 'center',
    },
    {
      title: '实验室职务',
      dataIndex: getValueByLabel('实验室职务'),
      key: getValueByLabel('实验室职务'),
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '技术职务名称',
      dataIndex: getValueByLabel('技术职务名称'),
      key: getValueByLabel('技术职务名称'),
      align: 'center',
    },
    {
      title: '工作单位',
      dataIndex: getValueByLabel('工作单位'),
      key: getValueByLabel('工作单位'),
      align: 'center',
      hideInSearch: true,
    },
    // {
    //   title: '课题',
    //   dataIndex: getValueByLabel('课题'),
    //   key: getValueByLabel('课题'),
    //   align: 'center',
    //   hideInSearch: true,
    // },
    // {
    //   title: '成果',
    //   dataIndex: getValueByLabel('成果'),
    //   key: getValueByLabel('成果'),
    //   align: 'center',
    //   hideInSearch: true,
    // },
    {
      title: '操作',
      align: 'center',
      hideInSearch: true,
      render: (text: any, record: any, dataIndex: any) => [
        <ModalForm
          title={
            <>
              <EditOutlined />
              {' 查看记录'}
            </>
          }
          trigger={
            <Button
              type="link"
              onClick={() => {
                // setEditYearVisible(true);
                // console.log(record);
                yearForm.setFieldsValue(record);
              }}
            >
              查看
            </Button>
          }
          visible={editYearVisible}
          onVisibleChange={setEditYearVisible}
          // request={async () => {
          //   return record
          // }}
          layout={'horizontal'}
          width={'95%'}
          grid
          submitter={false}
          key={dataIndex}
          form={yearForm}
        >
          <ProForm.Group rowProps={{ gutter: gutter }}>
            <ProFormText
              name={'years'}
              label={'年度'}
              colProps={{ span: 6 }}
              readonly
            />
            <ProFormText
              name={'directionName'}
              label={'方向'}
              colProps={{ span: 8 }}
              readonly
            />
            <ProFormText
              name={'groupName'}
              label={'子方向'}
              colProps={{ span: 8 }}
              readonly
            />
          </ProForm.Group>
          <ProForm.Group rowProps={{ gutter: gutter }}>
            <ProFormSelect
              name={'jobNature'}
              label={'工作性质'}
              colProps={{ span: 6 }}
              readonly
              options={[
                { label: '研究人员', value: '研究人员' },
                { label: '技术人员', value: '技术人员' },
                { label: '管理人员', value: '管理人员' },
              ]}
            />
            <ProFormSelect
              name={'position'}
              label={'实验室职务'}
              colProps={{ span: 6 }}
              readonly
              options={position}
            />
            <ProFormSelect
              name={'technicalGrade'}
              label={'技术职务等级'}
              colProps={{ span: 6 }}
              readonly
              options={technicalGrade}
              fieldProps={{
                onChange: (e) => {
                  // getLike.technicalName
                  //   .run({ field: 'technicalName', level: e })
                  //   .then((data: any) => {
                  //     setTechnicalName(data);
                  //   });
                  getTechnicalName
                    .run({ field: 'technicalName', level: e })
                    .then((data: any) => {
                      setTechnicalName(data);
                    });
                },
              }}
            />
            <ProFormSelect
              name={'technicalName'}
              label={'技术职务名称'}
              colProps={{ span: 6 }}
              readonly
              options={technicalName}
            />
          </ProForm.Group>

          <ProForm.Group rowProps={{ gutter: gutter }}>
            <ProFormSelect
              name={'isPostdoc'}
              label={'是否博士后'}
              colProps={{ span: 6 }}
              readonly
              options={[
                { label: '是', value: '是' },
                { label: '否', value: '否' },
              ]}
            />
            <ProFormText
              name={'talentLevel'}
              label={'人才层次'}
              colProps={{ span: 6 }}
              readonly
            />
          </ProForm.Group>

          <ProForm.Group rowProps={{ gutter: gutter }}>
            <ProFormSelect
              name={'topDegree'}
              label={'最高学位'}
              colProps={{ span: 6 }}
              readonly
              options={topDegree}
            />
            <ProFormDatePicker.Month
              name={'topDegreeGetTime'}
              label={'学位授予时间'}
              readonly
              colProps={{ span: 6 }}
            />
            <ProFormText
              name={'topDegreeUnit'}
              label={'学位授予单位'}
              colProps={{ span: 8 }}
              readonly
            />
          </ProForm.Group>
          <ProForm.Group rowProps={{ gutter: gutter }}>
            <ProFormSelect
              name={'topEducation'}
              label={'最高学历'}
              colProps={{ span: 6 }}
              options={topEducation}
              readonly
            />
            <ProFormSelect.SearchSelect
              mode={'single'}
              name={'topEducationMajor'}
              label={'最高学历专业'}
              colProps={{ span: 8 }}
              readonly
              fieldProps={{ labelInValue: false }}
              options={topEducationMajor}
            />
          </ProForm.Group>
          <ProForm.Group rowProps={{ gutter: gutter }}>
            <ProFormText
              name={'workUnit'}
              label={'工作单位'}
              colProps={{ span: 6 }}
              readonly
            />
            <ProFormText
              name={'achievement'}
              label={'成果'}
              colProps={{ span: 6 }}
              readonly
            />
            <ProFormText
              name={'honor'}
              label={'荣誉'}
              colProps={{ span: 6 }}
              readonly
            />
            <ProFormText
              name={'topic'}
              label={'课题'}
              colProps={{ span: 6 }}
              readonly
            />
          </ProForm.Group>
        </ModalForm>,
      ],
    },
  ];

  return (
    <PageContainer
      header={{
        title: ' ',
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>系统管理</Breadcrumb.Item>
            <Breadcrumb.Item>用户管理</Breadcrumb.Item>
            <Breadcrumb.Item>
              {userId === 'new' ? '新建用户' : '编辑用户'}
            </Breadcrumb.Item>
          </Breadcrumb>
        ),
        // extra: (
        //   <Button
        //     type="primary"
        //     onClick={() => {
        //       history.push('/SystemManage/UserManagement');
        //     }}
        //   >
        //     返回用户管理
        //   </Button>
        // ),
      }}
    >
      <ProCard
        title={
          <>
            {' '}
            <UserOutlined /> {' 基础信息'}
          </>
        }
        loading={!findOneUserInfoDetail.data}
        extra={
          userId != 'new' ? (
            <Button
              type="primary"
              icon={<ReloadOutlined />}
              loading={reSetPassword.loading}
              onClick={() => {
                reSetPassword.run({ id: userId }).then((data) => {
                  data
                    ? message.success('重置密码成功')
                    : message.error('重置密码失败');
                });
              }}
            >
              重置密码
            </Button>
          ) : (
            ''
          )
        }
      >
        <ProForm
          // layout="horizontal"
          grid
          onFinish={async (values) => {
            console.log(values);
            if (userId != 'new') {
              await updateUserById
                .run({
                  ...values,
                  groupType: values.groupId ? 0 : 1,
                  groupId: values.groupId || values.directionId,
                  year: parseInt(moment().format('YYYY')),
                  enterTime: values?.timeList[0] || null,
                  exitTime: values?.timeList[1] || null,
                })
                .then((data) => {
                  data
                    ? message.success('修改成功')
                    : message.error('修改失败');
                });
            } else {
              await insertUser
                .run({
                  ...values,
                  groupType: values.groupId ? 0 : 1,
                  groupId: values.groupId || values.directionId,
                  year: parseInt(moment().format('YYYY')),
                  enterTime: values?.timeList[0] || null,
                  exitTime: values?.timeList[1] || null,
                })
                .then((data) => {
                  data
                    ? message.success('添加成功')
                    : message.error('添加失败');
                });
            }
          }}
          form={form}
        >
          <ProFormText
            label="编号"
            name={'id'}
            colProps={{ span: 12 }}
            hidden
          />

          <ProForm.Group rowProps={{ gutter: gutter }}>
            <ProFormText
              label="工号"
              name={'username'}
              colProps={{ span: 6 }}
              rules={[{ required: true }]}
            />
            <ProFormText
              label="姓名"
              name={'realName'}
              colProps={{ span: 6 }}
              rules={[{ required: true }]}
            />
            <ProFormSelect
              label="用户状态"
              name={'status'}
              colProps={{ span: 4 }}
              options={[
                { label: '正常', value: 1 },
                { label: '停用', value: 0 },
              ]}
              rules={[{ required: true }]}
            />
            <ProFormSelect
              mode={'multiple'}
              name={'roles'}
              label={'用户权限'}
              rules={[{ required: true }]}
              colProps={{ span: 8 }}
              options={[
                { label: '管理员', value: 1 },
                { label: '方向负责人', value: 2 },
                { label: '子方向负责人', value: 3 },
                { label: '成员', value: 4 },
              ]}
            />
          </ProForm.Group>
          <ProForm.Group rowProps={{ gutter: gutter }}>
            <ProFormSelect
              name={'directionId'}
              label={'方向'}
              options={directionList}
              fieldProps={{
                onSelect: (e: any) => {
                  getGroupLabel.run(e).then((data) => {
                    setGroupList(data);
                  });
                  form.setFieldsValue({ groupId: '' });
                },
              }}
              colProps={{ span: 6 }}
              rules={[{ required: true }]}
            />
            <ProFormSelect
              name={'groupId'}
              label={'子方向'}
              options={groupList}
              colProps={{ span: 6 }}
              rules={[{ required: true }]}
            />
            <ProFormSelect
              name={'type'}
              label={'人员类别'}
              colProps={{ span: 4 }}
              rules={[{ required: true }]}
              options={[
                { label: '固定人员', value: '固定人员' },
                { label: '流动人员', value: '流动人员' },
                // { label: '学生', value: '学生' },
                { label: '非本室人员', value: '非本室人员' },
              ]}
            />
            <ProFormText
              name={'workUnit'}
              label={'工作单位'}
              colProps={{ span: 8 }}
              rules={[{ required: true }]}
            />
          </ProForm.Group>

          <ProCard title="研究信息" collapsible bordered headerBordered>
            <ProForm.Group rowProps={{ gutter: gutter }}>
              <ProFormSelect.SearchSelect
                mode="single"
                label="学院"
                name={'unit'}
                colProps={{ span: 5 }}
                // rules={[{ required: true }]}
                fieldProps={{
                  labelInValue: false,
                }}
                debounceTime={debounceTime}
                options={unit}
              />

              {/* <ProFormDatePicker.Month
                label="进入实验室时间"
                name={'enterTime'}
                colProps={{ span: 6 }}
              // rules={[{ required: true }]}
              />
              <ProFormDatePicker.Month
                label="离开实验室时间"
                name={'exitTime'}
                colProps={{ span: 6 }}
              // rules={[{ required: true }]}
              /> */}
              <ProFormDateRangePicker
                name={'timeList'}
                label={'项目起止时间'}
                fieldProps={{
                  picker: 'month',
                  format: 'YYYY-MM',
                }}
                colProps={{ span: 5 }}
              />
            </ProForm.Group>
            <ProForm.Group rowProps={{ gutter: gutter }}>
              <ProFormSelect
                name={'jobNature'}
                label={'工作性质'}
                colProps={{ span: 5 }}
                // rules={[{ required: true }]}
                options={[
                  { label: '研究人员', value: '研究人员' },
                  { label: '技术人员', value: '技术人员' },
                  { label: '管理人员', value: '管理人员' },
                ]}
              />
              <ProFormSelect
                name={'position'}
                label={'实验室职务'}
                colProps={{ span: 5 }}
                // rules={[{ required: true }]}
                options={position}
              />
            </ProForm.Group>
            <ProForm.Group rowProps={{ gutter: gutter }}>
              <ProFormSelect
                name={'technicalGrade'}
                label={'技术职务等级'}
                colProps={{ span: 5 }}
                // rules={[{ required: true }]}
                options={technicalGrade}
                fieldProps={{
                  onChange: (e) => {
                    // getLike.technicalName
                    //   .run({ field: 'technicalName', level: e })
                    //   .then((data: any) => {
                    //     setTechnicalName(data);
                    //   });
                    getTechnicalName
                      .run({ field: 'technicalName', level: e })
                      .then((data) => setTechnicalName(data));
                  },
                }}
              />
              <ProFormSelect
                name={'technicalName'}
                label={'技术职务名称'}
                colProps={{ span: 5 }}
                // rules={[{ required: true }]}
                options={technicalName}
              />
            </ProForm.Group>
            <ProForm.Group rowProps={{ gutter: gutter }}>
              {/* <ProFormText
                name={'achievement'}
                label={'成果'}
                colProps={{ span: 6 }}
              />
              <ProFormText
                name={'honor'}
                label={'荣誉'}
                colProps={{ span: 6 }}
              />
              <ProFormText
                name={'topic'}
                label={'课题'}
                colProps={{ span: 6 }}
              /> */}
            </ProForm.Group>
          </ProCard>

          <ProCard
            title="学籍信息"
            collapsible
            defaultCollapsed
            bordered
            style={{ marginTop: 3 }}
            headerBordered
          >
            <ProForm.Group rowProps={{ gutter: gutter }}>
              <ProFormSelect
                name={'isPostdoc'}
                label={'是否博士后'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
                options={[
                  { label: '是', value: '是' },
                  { label: '否', value: '否' },
                ]}
              />
              <ProFormText
                name={'talentLevel'}
                label={'人才层次'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
              />
            </ProForm.Group>
            <ProForm.Group rowProps={{ gutter: gutter }}>
              <ProFormSelect
                name={'topEducation'}
                label={'最高学历'}
                colProps={{ span: 3 }}
                options={topEducation}
                // rules={[{ required: true }]}
              />
              <ProFormSelect.SearchSelect
                mode={'single'}
                name={'topEducationMajor'}
                label={'最高学历专业'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
                fieldProps={{ labelInValue: false }}
                options={topEducationMajor}
              />
            </ProForm.Group>
            <ProForm.Group rowProps={{ gutter: gutter }}>
              <ProFormSelect
                name={'topDegree'}
                label={'最高学位'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
                options={topDegree}
              />
              <ProFormText
                name={'topDegreeUnit'}
                label={'学位授予单位'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
              />
              <ProFormDatePicker.Month
                name={'topDegreeGetTime'}
                label={'学位授予时间'}
                // rules={[{ required: true }]}
                colProps={{ span: 3 }}
              />
            </ProForm.Group>
          </ProCard>

          {/* <ProCard
            title="账号信息"
            collapsible
            defaultCollapsed
            bordered
            style={{ marginTop: 6 }}
            headerBordered
          >
            <ProForm.Group rowProps={{ gutter: gutter }}>

            </ProForm.Group>
          </ProCard> */}

          <ProCard
            title="个人信息"
            collapsible
            defaultCollapsed
            bordered
            style={{ marginTop: 6 }}
            headerBordered
          >
            <ProForm.Group rowProps={{ gutter: gutter }}>
              <ProFormSelect
                label="性别"
                name={'gender'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
                fieldProps={{
                  labelInValue: false,
                }}
                options={gender}
              />

              <ProFormSelect
                label="国别"
                name={'countryType'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
                fieldProps={{
                  labelInValue: false,
                  onSelect: (e: any) => {
                    // getLike.country
                    //   .run({ field: 'country', level: e })
                    //   .then((data: any) => {
                    //     setCountry(data);
                    //   });
                    getCountry
                      .run({ field: 'country', level: e })
                      .then((data) => setCountry(data));
                    form.setFieldsValue({ country: '' });
                  },
                }}
                options={countryType}
              />
              <ProFormSelect.SearchSelect
                mode="single"
                label="国家"
                name={'country'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
                fieldProps={{
                  labelInValue: false,
                }}
                options={country}
              />
              <ProFormSelect.SearchSelect
                mode="single"
                label="民族"
                name={'nation'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
                fieldProps={{
                  labelInValue: false,
                }}
                options={nation}
              />
            </ProForm.Group>
            <ProForm.Group rowProps={{ gutter: gutter }}>
              <ProFormSelect.SearchSelect
                mode="single"
                label="政治面貌"
                name={'politicalStatus'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
                fieldProps={{
                  labelInValue: false,
                }}
                options={politicalStatus}
              />
              <ProFormDatePicker
                label="生日"
                name={'birthday'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
              />
              <ProFormSelect
                label="证件类型"
                name={'idType'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
                fieldProps={{
                  labelInValue: false,
                }}
                options={idType}
              />
              <ProFormText
                label="证件号码"
                name={'idNumber'}
                colProps={{ span: 3 }}
                // rules={[{ required: true }]}
              />
            </ProForm.Group>
          </ProCard>
          <ProCard
            title="联系方式"
            collapsible
            defaultCollapsed
            bordered
            style={{ marginTop: 6, marginBottom: 12 }}
            headerBordered
          >
            <ProForm.Group rowProps={{ gutter: gutter }}>
              <ProFormText
                label="手机号码"
                name={'mobilePhoneNum'}
                colProps={{ span: 6 }}
                // rules={[{ required: true }]}
              />
              <ProFormText
                label="电子邮箱"
                name={'email'}
                colProps={{ span: 6 }}
                // rules={[{ required: true }]}
              />
              <ProFormText
                label="固定电话号码"
                name={'phoneNum'}
                colProps={{ span: 6 }}
                // // rules={[{ required: true }]}
              />
              <ProFormText
                label="传真"
                name={'faxNum'}
                colProps={{ span: 6 }}
                // // rules={[{ required: true }]}
              />
            </ProForm.Group>
          </ProCard>
        </ProForm>
      </ProCard>

      {userId != 'new' ? (
        <ProTable
          rowKey={'id'}
          headerTitle={
            <>
              <BarChartOutlined />
              <strong>{' 年度记录'}</strong>
            </>
          }
          columns={columns}
          style={{ marginTop: 12 }}
          request={async () => {
            var tableData: any = [];
            await findOneUserInfoDetail2.run({ id: userId }).then((data) => {
              tableData = data.historyDetail.sort(
                (a: any, b: any) => b.years - a.years,
              );
            });
            return { data: tableData, success: true };
          }}
          search={false}
        />
      ) : (
        ''
      )}
    </PageContainer>
  );
};
